<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avater_box">
        <img src="../../assets/images/3.jpg" />
      </div>
      <!-- 登录表单区域,绑定数据 -->
      <el-form
        class="login_form"
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginFormRules"
        label-width="80px"
      >
        <!-- 用户名 -->
        <!-- <label style="color:red">用户名</label> -->
        <el-form-item class="whiteitem" label="用户名" prop="username">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-search"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <!-- <label style="color:red">密码</label> -->
        <el-form-item class="whiteitem" label="密码" prop="password">
          <el-input v-model="loginForm.password" type="password" prefix-icon="el-icon-search"></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import Cookies from 'js-cookie' //npm install js-cookie --save yarn add js-cookie
export default {
  data() {
    return {
      userToken: '',
      //这是登录表单的数据绑定对象
      loginForm: {
        username: '',
        password: ''
      },
      //这是表单的验证规则对象
      loginFormRules: {
        //验证用户名是否合法
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
        ],
        //验证密码是否合法
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在3到10个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    let meta = document.createElement('meta')
    meta.content =
      'width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'
    meta.name = 'viewport'
    document.getElementsByTagName('head')[0].appendChild(meta)
  },
  methods: {
    //实现全屏
    fullScreen() {
      var el = document.documentElement
      var rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullscreen
      if (typeof rfs != 'undefined' && rfs) {
        rfs.call(el)
      }
      return
    },
    //点击重置按钮，重置登录表单
    resetLoginForm() {
      //console.log(this)
      //将表单绑定为loginFormRef
      this.$refs.loginFormRef.resetFields()
    },
    login() {
         this.$message.success('登录成功')
         Cookies.set('token', '1')
          this.$router.push('/home')
      // let this_ = this
      // let user = this.$qs.parse({
      //   username: this_.loginForm.username,
      //   password: this_.loginForm.password
      // })
      // this.$axios({
      //   headers: {
      //     Authorization: ' ',
      //     'content-Type': 'application/json;charset=UTF-8'
      //     //  Accept: 'application/json;charset=UTF-8'
      //   },
      //   method: 'post',
      //   url: 'http://127.0.0.1:8082/login',
      //   data: user
      // }).then(res => {
      //   console.log(res.data)
      //   Cookies.set('username', res.data.username)

      //   // console.log(this_.comsys.val(1))
      //   if (res.data.status === 'failed') {
      //     this.$router.push('/login/login')
      //     this_.loginForm.username = ''
      //     this_.loginForm.password = ''
      //     return this.$message.error(
      //       '登录失败,您输入的账号或者密码错误，请重试！'
      //     )
      //   } else if (res.data.status === 'success') {
      //     if (res.data.role === '管理员') {
      //       Cookies.set('token', '1')
      //     } else if (res.data.role === '运维员') {
      //       Cookies.set('token', '2')
      //     } else if (res.data.role === '值班员') {
      //       Cookies.set('token', '3')
      //     }
      //     this.$message.success('登录成功')
      //     this.$router.push('/home')
      //   }
      //   // _this.userToken = res.data.token
      // })

      // //用表单的引用对象调用函数进行前端校验

      // if (this_.loginForm.username == '' && this_.loginForm.password == '') {
      //   this.$message.success('登录成功')
      //   //分为三级权限1 表示最高 2 次之 3 最低。
      //   Cookies.set('token', '1')
      //   console.log('登录中' + Cookies.get('token'))
      //   //   window.sessionStorage.setItem("token",res.data.token);
      //   this.$router.push('/home')
      // } else if (
      //   this_.loginForm.username == '海清' &&
      //   this_.loginForm.password == '123456'
      // ) {
      //   this.$message.success('登录成功')
      //   //分为三级权限1 表示最高 2 次之 3 最低。
      //   Cookies.set('token', '2')
      //   console.log('登录中' + Cookies.get('token'))

      //   this.$router.push('/home')
      // } else {
      //   return this.$message.error('登录失败！')
      // }
      // if (this_.loginForm.username == '' && this_.loginForm.password == '') {
      //   this.$message.success('登录成功')
      //   //   window.sessionStorage.setItem("token",res.data.token);
      //   this.$router.push('/index')
      // } else {
      //   return this.$message.error('登录失败！')
      // }
      //this.$refs.loginFormRef.validate(async valid=>{
      // if(!valid) return;
      //访问后台地址，传参数,如果不加await async返回的是一个promise对象
      //取出data中的数据
      //    const {data: res}=await this.$http.post("login",this.loginForm);
      //    if(res.meta.status!==200) return this.$message.error("登录失败！");
      //    this.$message.success("登录成功");

      //1.将登录成功后的token,b保存到客户端的sessionStorage中
      //1.1项目中的除了登陆之外的其他API接口，必须在登录之后才能访问
      //1.2token只应在当前网站打开期间生效所以将token保存在sessionSorage中
      //
      //    if(this.$refs.loginFormRef.username=="慕容小小"&&this.$refs.loginFormRef.password=="123456"){
      //                   this.$message.success("登录成功");
      //                   window.sessionStorage.setItem("token",res.data.token);
      //                   this.$router.push("/index");
      // }else{
      //     return this.$message.error("登录失败！");
      // }

      //    console.log("登录成功");
      //   })
      //实现全屏
      this.fullScreen()
    }
  }
}
</script>
<style lang="scss">
html {
  //浏览器默认字体大小是16px;62.5%是10px;
  font-size: 62.5%;
  height: 100%;
}
.el-form-item__label {
  color: white;
}
::-webkit-scrollbar {
  width: 8px;
  // background-color: #0e487c;
  background-color: #032c2e;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #032c2e;
  border-radius: 10px;
}
::-webkit-scrollbar-button {
  display: none;
}
</style>
<style lang="scss" scoped>
//  vue中使用less
// 首先vue开发环境已经安装成功
// 当所有东西都 准备好之后 ：
// 第一步：
// 安装less依赖，npm install less less-loader --save
// 第二步：
// 修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加
// {
// test: /\.less$/,
// loader: "style-loader!css-loader!less-loader",
// },
// 现在基本上已经安装完成了，然后在使用的时候在style标签里加上lang=”less”里面就可以写less的代码了(style标签里加上 scoped 为只在此作用域 有效)
// （或者
// @import './index.less'; //引入全局less文件
// ）。
// (
// html中直接引入：
// <link rel="stylesheet/less" type="text/css" href="文件路径/styles.less">
// <script src="文件路径/less.js" type="text/javascript"></script>
// )
// #login {
//   background-image: url(../../assets/images/登录背景3.jpg);
// }
.login_container {
  background-image: url(../../assets/images/登录背景4.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 88rem;
}
//将登录盒子放到正中间
.login_box {
  width: 710px;
  height: 275px;
  // background-color: #fff;
  background-image: url(../../assets/images/登录框背景.jpg);
  // background-color: rgb(0, 101, 105);
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 51.3%;
  transform: translate(-50%, -50%);
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 50%;
  padding: 5px 2px;
  left: 45%;
  margin-right: 3rem;
  // background-color: rgb(0, 101, 105);
  // opacity: 0;
  // font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
.btns {
  display: flex;
  justify-content: flex-end;
}
.avater_box {
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  // background-color: #fff;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
  }
}
//  .whiteitem .el-form-item__label{
//     text-align: right;
//  vertical-align: middle;
// float: left;
// font-size: 18px;
// color:white;
// line-height: 40px;
// padding: 0 12px 0 0;
// -webkit-box-sizing: border-box;
// box-sizing: border-box;
// }
</style>
